<template>
  <div class="container">
    <el-card class="box-card">
      <div class="shouhang">
        <div class="shuoming">说明：目前支持学科和关键字条件筛选</div>
        <div class="xinzeng">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </div>
      </div>

      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="学科">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            @change="changeSubject(form.subjectID)"
          >
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              v-for="item in Dlist"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.tags" placeholder="请选择">
            <el-option
              v-for="item in Blist"
              :key="item.id"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="form.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option
              v-for="item in difficulty"
              :label="item.label"
              :key="item.value"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              v-for="item in direction"
              :label="item"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="form.creatorID" placeholder="请选择">
            <el-option
              v-for="item in Ylist"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="form.province"
            placeholder="请选择"
            @change="QQQQ"
          >
            <el-option
              v-for="item in provincesList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择">
            <el-option
              v-for="item in citysList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="query" >查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { list, simple } from '@/api/hmmm/subjects.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as Dlist } from '@/api/hmmm/directorys.js'
import { list as Blist } from '@/api/hmmm/tags.js'
import { list as Ylist } from '@/api/base/users.js'

export default {
  props: {
    tableData: {
      type: Array
    }
  },
  data () {
    return {
      form: {
        subjectName: '',
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在城市
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },

      list: [],
      Qlist: {},
      questionType: questionType,
      difficulty: difficulty,
      direction: direction,
      provincesList: [], // 省份
      provinces,
      citys,
      citysList: [], // 城市
      Dlist: [], // 二级目录
      Blist: [],
      Ylist: [] // 标签

    }
  },
  methods: {

    // 查询
    query () {
      this.$emit('Slist', this.form.keyword)
      this.$emit('Plist', this.form.subjectID)
      this.$emit('hchoice', this.form.keyword)
      this.$emit('SHchoice', this.form.subjectID)
    },
    // 取消
    cancel () {
      this.form = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在城市
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      }
      this.$emit('Slist')
      this.$emit('SHchoice')
    },
    // 学科列表
    async hlist () {
      const res = await list()
      console.log(res)
      // this.list = res.data.items
    },
    // 学科简单列表
    async hsimple () {
      const res = await simple()
      console.log(res)
      this.list = res.data
    },
    // 题型
    hquestionType (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简单'
      }
      return map[type]
    },
    // 学科/二级目录/标签 下拉菜单
    async changeSubject (id) {
      const res = await Dlist({ subjectID: id })
      const req = await Blist({ subjectID: id })
      console.log(req)
      console.log(res)
      this.Dlist = res.data.items
      this.Blist = req.data.items
    },
    // 城市地区
    QQQQ () {
      this.citysList = this.citys(this.form.province)
    },
    // 录入人
    async hYlist () {
      const res = await Ylist()
      console.log(res)
      this.Ylist = res.data.list
    }
  },

  mounted () {
    this.hlist()
    this.hsimple()
    this.provincesList = this.provinces()
    this.hYlist()
  }
}
</script>
<style>
.box-card {
  margin: 15px 10px;
}
</style>
<style scoped lang='scss'>
.shouhang {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.shuoming {
  font-size: 12px;
  color: pink;
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
